<html>

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
        />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>simpleProxy</title>
        <style>
            #app {
                margin: 100px auto 0 auto;
                width: 300px;
            }

            #btn {
                margin: 10px auto;
            }
        </style>
    </head>

    <body>
        <div id="app">
            <input type="text" id="input" />
            <div>您输入的是：
                <span id="title"></span>
            </div>
            <button type="button" name="button" id="btn">添加到Todolist</button>
            <ul id="list"></ul>
        </div>
    </body>

    <script>
        const obj = {};
        const arr = [];
        const input = document.getElementById("input");
        const title = document.getElementById("title");
        const list = document.getElementById("list");
        const btn = document.getElementById("btn");
        // 渲染todolist列表
        const Render = {
            // 初始化
            init: function (arr) {
                const fragment = document.createDocumentFragment();
                for (let i = 0; i < arr.length; i++) {
                    const li = document.createElement("li");
                    li.textContent = arr[i];
                    fragment.appendChild(li);
                }
                list.appendChild(fragment);
            },
            addList: function (val) {
                const li = document.createElement("li");
                li.textContent = val;
                list.appendChild(li);
            }
        };
        // 监听对象
        const newObj = new Proxy(obj, {
            get: function (target, key, receiver) {
                console.log(`getting ${key}!`);
                return Reflect.get(target, key, receiver);
            },
            set: function (target, key, value, receiver) {
                console.log(target, key, value, receiver);
                if (key === "text") {
                    input.value = value;
                    title.innerHTML = value;
                }
                return Reflect.set(target, key, value, receiver);
            }
        });

        // 监听数组
        const newArr = new Proxy(arr, {
            get: function (target, key, receiver) {
                return Reflect.get(target, key, receiver);
            },
            set: function (target, key, value, receiver) {
                console.log(target, key, value, receiver);
                if (key !== "length") {
                    Render.addList(value);
                }
                return Reflect.set(target, key, value, receiver);
            }
        });
        // 初始化
        window.onload = function () {
            Render.init(arr);
        };
        input.addEventListener("keyup", function (e) {
            newObj.text = e.target.value;
        });
        btn.addEventListener("click", function () {
            newArr.push(newObj.text);
        });
    </script>

</html>
